﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
    <title>Web run scanner example • ScanPod3D</title>
    <style>
        .buttons {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
        }

            .buttons a {
                margin: 0.5rem;
                min-width: 10rem;
            }

            .buttons p {
                margin: 1rem;
                min-width: 20rem;
                min-height: 2rem;
                border: 1px solid darkgray;
            }
    </style>
    <script>
        var ws;
        function initWS() {
            ws = new WebSocket("ws://127.0.0.1:1596/XsolWebRunScanner");
            ws.onopen = function () {
                console.log("Openened connection to websocket");

            };
            ws.onclose = function () {
                console.log("Close connection to websocket");
                // 断线重连
                initWS();
            }

            ws.onmessage = function (e) {
                //alert(e.data)
                document.getElementById("status").innerHTML = e.data;
            }
        }

        initWS();
        function StartScanner() {

            ws && ws.send('start');
        }
        function PrepareScan() {
            var textArea = document.getElementById("firstname");
            var strFirstName = textArea.value;
            textArea = document.getElementById("lastname");
            var strLastName = textArea.value;

            var strGender = "1";
            const radioMale = document.getElementById('male');
            if (radioMale.checked) {
                strGender = "0";
            }

            var strPassword = "000000000000";

            var strCmd = "preparescan " + strFirstName + " " + strLastName + " " + strGender + " " + strPassword;

            ws && ws.send(strCmd);
        }


        function ExitScan() {
            ws && ws.send('exit');
        }
    </script>
</head>

<body>

    <main class="container-fluid">
        <article class="grid">
            <div>
                <div class="buttons">
                    <a href="XsolWebRunScanner://" class="first">Start XsolWebRunScanner Service</a>
                </div>
                <div class="buttons">
                    <a href="#" role="button" class="secondary" onclick="StartScanner()">Start Scanner</a>
                </div>
                <div class="grid">
                    <input type="text" id="firstname" name="firstname" placeholder="First name" value="John" required>
                    <input type="text" id="lastname" name="lastname" placeholder="Last name" value="Doe" required>
                    <fieldset>
                        <label for="male">
                            <input type="radio" id="male" name="Gender" value="male" checked />
                            Male
                        </label>
                        <label for="female">
                            <input type="radio" id="female" name="Gender" value="female" />
                            Female
                        </label>
                    </fieldset>

                </div>

                <div class="buttons">
                    <a href="#" role="button" class="secondary" onclick="PrepareScan()">Prepare Scan</a>
                    <a href="#" role="button" class="secondary" onclick="ExitScan()">Exit</a>
                    <p id="status"></p>

                </div>
            </div>

        </article>

    </main>

    <footer class="container-fluid">
        <small>
            Made by <a href="https://www.ScanPod3D.com" class="secondary">ScanPod3D</a>
        </small>
    </footer>

</body>

</html>